<!DOCTYPE html>
<html>

<head>
    <script src="./js/zrender.js"></script>

    <title></title>
</head>

<body>
    <div id="container" style="height: 760px; width: 1430px;"></div>
    <script>
        var zr = zrender.init(document.getElementById('container'));
        var w = zr.getWidth();
        var h = zr.getHeight();

        var er1 = new zrender.Ellipse({
            shape: {
                cx: w / 2+10,
                cy: h / 2 - 100,
                rx: 50,
                ry: 40,
            },
            style: {

            },
            z: 1,
            rotation: -65,
            origin: [w / 2, h / 2 - 100],
        })
        var er2 = new zrender.Ellipse({
            shape: {
                cx: w / 2 + 200,
                cy: h / 2 - 100,
                rx: 50,
                ry: 40,
            },
            style: {

            },
            z: 1,
            rotation: 75,
            origin: [w / 2 + 200, h / 2 - 100],
        });
        var face = new zrender.Circle({
            shape: {
                cx: w / 2+100,
                cy: h / 2+20,
                r:150,
                
            },
            style: {
                fill: "rgba(245,245,245,1)",
                stroke: "#0e0d0d",
                lineWidth: 6,
            },
            z: 1
        });
        var eye1 = new zrender.Heart({
            shape: {
                cx: w / 2 + 140,
                cy: h / 2 - 40,
                width: 20,
                height: 35
            },
            style: {
                fill:'#ff0000'
            },
            z: 1
        });
        var eye2 = new zrender.Circle({
            shape: {
                cx: w / 2 + 45,
                cy: h / 2-25,
                r: 20
            },
            style: {
                fill: '#00ff00'
            },
            z: 1
        });
        var mouth_x = new zrender.BezierCurve({
            shape: {
                x1: w / 2 + 60,
                y1: h / 2 + 60,
                x2: w / 2 + 150,
                y2: h / 2 + 50,
                cpx1: w / 2 + 150,
                cpy1: h / 2 +100,

            },
            style: {
                lineWidth: 12,
            },
            z: 1,
        });
        var body_x = new zrender.Rect({
            shape: {
                x: w / 2 - 150,
                y: h / 2 + 65,
                r: [160, 160],
                width: 500,
                height: 700,
            },
            style: {

            },
            z: 0
        });
        var l1 = new zrender.Rect({
            shape: {
                x: w / 2 + 150,
                y: h / 2 + 65,
                r: [160, 160],
                width: 500,
                height: 100,
            },
            style: {

            },
            z: 0
        })
        ;
        var l2 = new zrender.Rect({
            shape: {
                x: w / 2 - 100,
                y: h / 2 + 250,
                r: [160, 160],
                width: 500,
                height: 90,
            },
            style: {

            },
            z: 1
        })
        ;
        var duzi = new zrender.Circle({
            shape: {
                cx: w / 2+120,
                cy: h / 2+400,
                r:180,
                
            },
            style: {
                fill: "rgba(245,245,245,1)",
                stroke: "#CCCCCC",
                lineWidth: 6,
            },
            z: 0
        });
        var qiu = new zrender.Circle({
            shape: {
                cx: w / 2+550,
                cy: h / 2+300,
                r:180,
                
            },
            style: {
                fill: "rgba(245,245,245,1)",
                stroke: "#330000",
                lineWidth: 6,
            },
            z: 0
        });
        zr.add(er1);
        zr.add(er2);       
        zr.add(face);
        zr.add(eye1);
        zr.add(eye2);
        zr.add(mouth_x);
        zr.add(l1);
        zr.add(l2);   
        zr.add(body_x);
        zr.add(duzi);
        zr.add(qiu)
        

    </script>
</body>

</html>